
<template>
<!-- /兑奖 -->
    <div class="AwardingOrders">
        <header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">兑奖订单</h1>
		</header>
        <div class="headerone">        
           <div class="headeroneone"> <span style="left:21%;" :class="is==1? 'color' : '' " @click="MVcolor($event)"> 全部 </span>  <span :class="is==2? 'color' : '' "@click="MVcolor($event)"style="left:45%;">处理中</span>  <span :class="is==3? 'color' : '' " @click="MVcolor($event)" style="left:70%;">已发货</span> <em>&nbsp;</em></div>
           <div class="headeronetwo" style="left:10%;"></div>
        </div>
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="toto">
                            <div class="font1">订单定好：25146464646</div>
                            <div  class="font1">创建时间：2018-03-21</div>
                               <div class="ab">
                                   <img src="../../img/purchase/矩形15.png" alt="">
                                   <span  class="ae">已发货</span>
                               </div>
                            <div class="mui-table-view-cell mui-media">
                                <img class="mui-media-object mui-pull-left" src="../../img/purchase/修改.png">
                                <div class="mui-media-body">
                                <p class='mui-ellipsis font1' >能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                                <p class="font1">数量：1</p>
                        </div>
                        </div>
                        </div>
					</div>
				</div>
				<div class="mui-card-footer">
                <span> $750,245,000 <img src="../../img/AwardingMall/兑奖商城金币.png" alt=""></span>
                 </div>
			</div>
             <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="toto">
                            <div class="font1">订单定好：25146464646</div>
                            <div  class="font1">创建时间：2018-03-21</div>
                               <div class="ab">
                                   <img src="../../img/purchase/矩形15.png" alt="">
                                   <span  class="ae">已发货</span>
                               </div>
                            <div class="mui-table-view-cell mui-media">
                                <img class="mui-media-object mui-pull-left" src="../../img/purchase/修改.png">
                                <div class="mui-media-body">
                                <p class='mui-ellipsis font1' >能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                                <p class="font1">数量：1</p>
                        </div>
                        </div>
                        </div>
					</div>
				</div>
				<div class="mui-card-footer">
                <span> $750,245,000 <img src="../../img/AwardingMall/兑奖商城金币.png" alt=""></span>
                 </div>
			</div>
    </div>
</template>
<script>
import { Picker } from "mint-ui";
export default {
  data() {
    return {
      is: 1
    };
  },
  methods: {
    MVcolor: function(e) {
      var headeronetwo = document.querySelector(".headeronetwo");
      if (e.target.innerText == "全部") {
        this.is = 1;
        headeronetwo.style.left = "10%";
      } else if (e.target.innerText == "处理中") {
        this.is = 2;
        headeronetwo.style.left = "34%";
      } else if (e.target.innerText == "已发货") {
        headeronetwo.style.left = "58%";
        this.is = 3;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.AwardingOrders {
  height: 100%;
  padding-top: 50px;
  .mui-bar {
    background: rgb(153, 9, 9);
    a {
      color: #ffff;
    }
    h1 {
      color: #ffff;
    }
  }
  .headerone {
    height: 50px;
    background: #fff;
    text-align: center;
    line-height: 50px;
    position: relative;
    .headeronetwo {
      position: absolute;
      background: red;
      width: 31.48%;
      box-sizing: border-box;
      top: 1px;
      border-radius: 36px;
      height: 100%;
      transition: all 0.3s;
    }
    .headeroneone {
      width: 79%;
      margin: 0 auto;
      border: 1px solid red;
      border-radius: 36px;
      display: flex;
      justify-content: space-between;
      .color {
        color: #ffff;
      }
      span {
        position: absolute;
        left: 31.48%;
        z-index: 10;
      }
    }
  }
  .mui-card {
    .mui-card-content {
      .mui-card-content-inner {
        border-bottom: 1px solid #e0e0e0;
        .toto {
          position: relative;
          .ab {
            position: absolute;
            top: -10px;
            right: -15px;
            img {
              width: 70px;
            }
            span {
              position: absolute;
              top: 5px;
              left: 10px;
              color: red;
            }
          }
          .font1 {
            color: #141414;
          }
          .mui-table-view-cell {
            margin-left: -18px;
          }
        }
      }
    }
    .mui-card-footer:before {
      height: 0px;
    }
    .mui-card-footer {
      float: right;
      span {
        color: #141414;
        img {
          margin-left: 5px;
          position: relative;
          top: 2px;
        }
      }
    }
  }
}
</style>    
    margin-left: -17px;